<template>
  <div
    :id="canvasId"
    ref="rootContainer"
    style="position: relative; background-repeat: no-repeat; background-size: 100% 100%"
    :style="containerStyle"
    @click="setCurComponent(null)"
  >
    <Menu
      v-for="(item, index) in previewData.pageData"
      :key="index"
      :id="item.id"
      :style="getStyle(item)"
      :is-edit="isEdit"
      @open-change="openChange($event, item)"
      @on-copy="handleCopy(item)"
      @on-delete="handleDelete(item)"
      @click.stop="handleSetCurComponent(item)"
    >
      <component
        :is="diyComps[item.componentName]"
        v-bind="item"
        v-model:data="item.data"
        @update="handleUpdateControl"
      ></component>
    </Menu>

    <!--控制器-->
    <component
      ref="controlRef"
      v-if="isEdit && currentComponent"
      :is="currentControl"
      v-bind="{
        ...guidelines,
        ...currentComponent.control,
        target: `#${currentComponent.id}`,
        rootContainer,
        elementGuidelines: handleGetElIds(currentComponent)
      }"
      @on-set-Style="handleSetStyle"
    ></component>
  </div>
</template>

<script setup lang="ts">
import diyComps from '@/diy/comps'
import diyControl from '@/diy/control'
import { type IDiyBase } from '@/diy/types'
import { cloneDeep } from 'lodash-es'
import { computed, nextTick, type PropType, ref, toRefs } from 'vue'
import { DiyStore } from '@/entity/DiyStore'
import Menu from './menu.vue'

const props = defineProps({
  store: {
    type: Object as PropType<DiyStore>,
    required: true
  }
})

const rootContainer = ref()
const { deleteComponent, setCurComponent, copyComponent } = props.store
const { previewData, currentComponent, isEdit, guidelines, canvasId } = toRefs(props.store)

//设置样式
const getStyle = (item: any) => {
  return { ...item.style }
}
//获取控制器
const controlRef = ref()
const currentControl = computed(() => {
  if (!currentComponent.value) {
    return null
  }
  const commonControl = diyControl['DiyCommon']
  const control = diyControl[currentComponent.value.componentName]
  return control || commonControl
})
//更新控制器
const handleUpdateControl = () => {
  nextTick(() => {
    try {
      controlRef.value?.update()
    } catch (e) {
      console.log(e)
    }
  })
}

//全局配置
const globalSetting = computed(() => {
  return previewData.value.globalSetting
})
//容器样式
const containerStyle = computed(() => {
  const { canvasWidth, canvasHeight, canvasBgImage, canvasBgColor } = globalSetting.value
  return {
    width: canvasWidth,
    height: canvasHeight,
    backgroundColor: canvasBgColor,
    backgroundImage: canvasBgImage ? `url('${canvasBgImage}')` : undefined
  }
})

//处理设置样式
const handleSetStyle = (style: any = {}) => {
  if (!currentComponent.value) {
    return
  }
  const cloneComponent = cloneDeep(currentComponent.value)
  cloneComponent.style = {
    ...cloneComponent.style,
    ...style
  }
  setCurComponent(cloneComponent)
}
//处理点击组件
const handleSetCurComponent = (item: any) => {
  setCurComponent(item)
}

//获取吸附点
const handleGetElIds = (item: IDiyBase) => {
  const list: IDiyBase[] = previewData.value.pageData
  return list
    .filter((el) => el.id !== item.id)
    .map((el) => {
      return { element: `#${el.id}`, className: 'red' }
    })
}

/**
 * 菜单
 */
const openChange = (event: boolean, item: IDiyBase) => {
  if (event) {
    setCurComponent(item)
  }
}
// 删除
const handleDelete = (item: IDiyBase) => {
  deleteComponent(item.id)
}
// 复制
const handleCopy = (item: IDiyBase) => {
  copyComponent(item)
}
</script>
